<template>
	<view class="achievements" @click="wrapClick">
		<view class="card" style="padding: 12rpx 20rpx;">
			<view class="title light" style="margin-bottom: 0;">
				{{ title }}-统计
				<view style="flex: 1; color: #999999;font-size: 24rpx;font-weight: normal;" v-if="memberList.length">
					(统计人数:{{ userList.length }})</view>
				<view class="data-change" @click="changeMember" v-if="findRoute('data_change') && !childDeep">
					<image src="@/static/images/index/change.svg" mode=""></image>
					切换
				</view>
			</view>
		</view>
		<view class="card">
			<view class="title">
				<view style="display: flex;">作业月历
					<zb-tooltip placement="bottom-start" ref="tooltip">
						<image class="msg" src="@/static/images/msg.png"></image>
						<view slot="content">
							<view>1.[作业]定义：即操作过签到或签退任务。任务</view>
							<view>类型包括保养、维修、配件。</view>
							<view>2.作业月历可统计每日签到或签退过的任务数量。</view>
						</view>
					</zb-tooltip>
				</view>
			</view>
			<workCalendar :checkedDate="checkedDate" v-if="userList.length" @setDateInfo="setDateInfoFuc"
				@select="selectDate" :orders="workerOrders" :users="memberList" @changeMonth="changeMonth"
				@work="lookTasks">
			</workCalendar>
			<view class="title-d" style="margin-top: 30rpx;">
				<view class="" style="display: flex;align-items: center;justify-content: flex-start;flex:1">
					每日作业明细
				</view>
				<view class="chart-total-detail" v-if="everydays.order.orderCount">
					<view @click="toMaintenanceList(1)" v-if="memberList.length > 0 || userList.length > 1">
						详情
						<image src="@/static/images/right.png" mode=""></image>
					</view>
				</view>
			</view>
			<view class="data-types" style="padding-bottom:10rpx;"
				v-if="userList.length && userList.length > 1 && everydays.hasData">
				<view style="display: flex;align-items: center;width: 100%;justify-content: space-between;">
					<sTabs v-if="memberList.length > 1" @change="changeTab('everydays', $event)" :list="typeList"
						:idx="everydays.typeIdx"></sTabs>
					<view style="margin-left: auto;">
						<typeTabs :list="typeListOther" :chooseIndex="chooseIndex" @changeOther="choose"></typeTabs>
					</view>
				</view>
			</view>
			<view style="display: flex;justify-content: space-between;margin-bottom: 10rpx;">
				<view style="display: flex;align-items: center;justify-content: flex-start;flex:1;">
					<view class="date-view">日期:{{ checkedDate.year }}年{{ checkedDate.month }}月{{ checkedDate.day }}日
					</view>
					<view class="tag1 info"
						v-if="!everydays.order.orderCount && !everydays.order.isPlan &&!everydays.order.holiday">无任务
					</view>
					<view class="tag1 err"
						v-if="!everydays.order.orderCount && everydays.order.isPlan &&!everydays.order.holiday"
						@click="lookTasks(everydays)">
						<view>有任务</view>
						<uni-icons color="#e02020" size="14px" type="forward"></uni-icons>
					</view>
					<zb-tooltip placement="bottom" ref="tooltip"
						v-if="!everydays.order.orderCount && !everydays.order.isPlan &&!everydays.order.holiday">
						<image class="msg" src="@/static/images/msg.png"></image>
						<view class="" slot="content">当天未安排保养任务</view>
					</zb-tooltip>
					<zb-tooltip placement="bottom" ref="tooltip"
						v-if="!everydays.order.orderCount && everydays.order.isPlan &&!everydays.order.holiday">
						<image class="msg" src="@/static/images/msg.png"></image>
						<view class="" slot="content">截至当天，存在未完成的保养任务</view>
					</zb-tooltip>
				</view>
				<view class="key-setting" v-if="userList.length > 1 && everydays.order.orderCount"
					@click="showKeysSelect('everydays')">
					<uni-icons type="gear" style="margin-right: 4rpx;"></uni-icons>
					指标设置
				</view>
			</view>
			<defaultBlock :type="everydays.order.holiday ? 2 : 1"
				:text="everydays.order.holiday ? '- 休息日 -' : '- 暂无相关数据 -'" v-if="!everydays.hasData"></defaultBlock>
			<view v-if="everydays.hasData">
				<s-table :dataList="everydays.groupRecords" :totals="everydays.totals" :title="title"
					v-if="memberList.length" @toContractDetail="toContractDetail($event, everydays.typeIdx)"
					:headers="everydays.typeIdx == 1 ? choosedHeadUserList.length != 0 ? choosedHeadUserList : everydays.leaderHeadUser.slice(0, 3) : choosedHeadList.length != 0 ? choosedHeadList : everydays.leaderHead.slice(0, 5)">
				</s-table>

				<s-table v-else :dataList="everydays.groupRecords" :totals="everydays.totals"
					:headers="everydays.userHead" @toContractDetail="toMemberDetail($event, 1)"></s-table>
			</view>
		</view>
		<!-- 筛选器 -->
		<!-- <view class="card">
			<view class="title light">作业汇总</view>
			<view class="filter">
				<view class="filter-item">
					<view class="filter-item-label">统计类型:</view>
					<view class="filter-item-content">
						<view :class="['tag', filter.type == 1 ? 'act' : '']" @click="filterFuc('type', 1)">数量</view>
						<view :class="['tag', filter.type == 2 ? 'act' : '']" @click="filterFuc('type', 2)">趋势</view>
					</view>
				</view>

				<view class="filter-item">
					<view class="filter-item-label">日期范围:</view>
					<view class="filter-item-content">
						<view :class="['tag', filter.dateType == 2 ? 'act' : '']" @click="filterFuc('dateType', 2)">近7天
						</view>
						<view :class="['tag', filter.dateType == 3 ? 'act' : '']" @click="filterFuc('dateType', 3)">近30天
						</view>
					</view>
				</view>
				<view class="filter-item">
					<view class="filter-item-label"></view>

					<view class="filter-item-content">
						<view style="position: relative;" :class="['tag', 'date', filter.dateType == 4 ? 'act' : '']"
							@click="filterFuc('dateType', 4)">
							{{ filter.dateType == 4 ? filter.startTime + ' 至 ' + filter.endTime : '自定义日期' }}
							<uni-icons :color="filter.dateType == 4 ? '#0091ff' : '#999999'"
								style="position: absolute;right:4rpx" type="forward"></uni-icons>
						</view>
					</view>
				</view>
			</view>
		</view> -->
		<!-- 筛选器end -->
		<!-- 绩效作业时长 -->
		<workTime ref="workTime" :workOrderDeep="workOrderDeep" :toDeepCheckedDate="checkedDate"
			:chooseIndex="chooseIndex" :pageScrollTop="pageScrollTop" :childDeep="childDeep" :userList="userList"
			:memberList="memberList" :groupId="groupId" @applyToAll="getApplyToAll" @setToDeepPage="getWorkTimeDeep">
		</workTime>
		<!-- 绩效作业时长 end -->

		<!-- 作业工单 -->
		<workOrder ref="workOrder" :workTimeDeep="workTimeDeep" :toDeepCheckedDate="checkedDate"
			:chooseIndex="chooseIndex" :pageScrollTop="pageScrollTop" :childDeep="childDeep" :userList="userList"
			:memberList="memberList" :groupId="groupId" @applyToAll="getApplyToAll" @setToDeepPage="getWorkOrderDeep">
		</workOrder>
		<!-- 作业工单 end -->

		<view class="bottom-block">- 已经到底了 -</view>

		<memberSelect v-if="memberList.length" :members="memberList" ref="memberSelect" @success="changeMbsFuc">
		</memberSelect>
		<tagSelect ref="tagSelect" @success="changeTags"></tagSelect>
		<sPicker ref="sPicker" @change="changeDateType"></sPicker>
		<time-select :beforeToday="true" :atterToday="true" v-if="selectTimePopup" @close="closeSelectTimePopup"></time-select>

		<!-- 查看任务 -->
		<view-tasks :show="showTasks" :endTime="endTime" :userIds="userList" @closed="handleClose" ref="view-tasks">
		</view-tasks>
	</view>
</template>

<script>
import {
	mapState,
	mapActions
} from 'vuex';
import {
	getNowTime
} from '@/utils/utils.js';
import {
	getLastDates
} from '@/utils/tools.js';
import {
	setLineOpt,
	setRingOpt
} from './achievements/chartSet.js';
import workTime from './achievements/workTime.vue';
import workOrder from './achievements/workOrder.vue';
import treeNodesSign from '@/components/member-tree/tree-nodesSign.vue';
import sTable from '../components/s-table/s-table.vue';
import sPicker from '../components/s-picker/s-picker.vue';
import typeTabs from './components/typeTabs.vue';
import sTabs from './components/tabs.vue';
import tagSelect from './components/tag-select.vue';
import memberSelect from './components/member-select.vue';
import timeSelect from './components/timeSelect.vue';
import defaultBlock from './components/default.vue';
import workCalendar from './components/workCalendar.vue';
import viewTasks from './components/viewTasks.vue';
import {
	getDayDetail2,
	getDayDetail3,
	getDayDetail4,
	getCalendarPlans,
} from '@/apis/statistic.js';
export default {
	name: 'achievements',
	props: {
		pageScrollTop: {
			type: [Number, String],
			default: 0
		},
		childDeep: {
			type: [Number, String],
			default: 0
		}
	},
	components: {
		workOrder,
		workTime,
		workCalendar,
		treeNodesSign,
		defaultBlock,
		sPicker,
		sTable,
		typeTabs,
		sTabs,
		tagSelect,
		timeSelect,
		memberSelect,
		viewTasks
	},

	data() {
		return {
			year: '',
			workOrderDeep: '', // 工单页 带参下传
			workTimeDeep: '', // 工时页 带参下传
			showTasks: false, // 查看任务
			endTime: '', // 截至时间
			month: '',
			workerOrders: [],
			checkedDate: {
				// 选择的某天
				year: '',
				month: '',
				day: ''
			},
			filter: {
				type: 1, // 统计类型 1数量，2趋势
				dateType: 2, // 日期范围 1今天，2近七天，3近30天，4自定义日期
				startTime: '',
				endTime: ''
			},
			groupRecords: [], // 组明细
			userRecords: [], // 人明细
			title: '',
			groupModel: false, // 组模式
			dateTypes: ['按日', '按周', '按月'],
			userList: [],
			memberList: [], // 组数据源
			groupId: '',
			selectTimePopup: false,
			typeList: ['按组', '按人'],
			typeListOther: ['合计', '保养', '维修', '配件'],
			choosedHeadUserList: [],
			choosedHeadList: [],
			chooseIndex: 0,
			groupList: ['整体趋势', '趋势对比'],
			groupTotal: {}, // 全部数据
			ringChart: setRingOpt(),
			everydays: {
				// 每日作业明细
				totals: {},
				order: {
					date: '',
					holiday: false,
					isPlan: false,
					orderCount: 0,
					userCount: 0
				},
				typeIdx: 0, // 0按组 1按人
				hasData: true,
				groupRecords: [],
				userHead: [{
					name: '作业类型', // 表头名称
					sort: false, // 是否开启该列的排序功能
					width: 210, // 列宽
					checked: true,
					key: 'name', // 显示哪个字段
					unit: '' // 单位
				},
				{
					name: '作业工单数量',
					sort: true,
					checked: true,
					width: 220,
					key: 'orderCount'
				},
				{
					name: '累计作业人工时/(小时)',
					sort: true,
					width: 220,
					checked: true,
					// fixed: 1,
					key: 'workTime',
					unit: ''
				},
				{
					name: '工单平均/作业人工时/(小时)',
					sort: true,
					width: 175,
					checked: true,
					head: '/',
					key: 'divWorkTime',
					unit: ''
				}
				],
				leaderHeadUser: [{
					name: '组名', // 表头名称
					sort: false, // 是否开启该列的排序功能
					checked: true,
					width: 210, // 列宽
					key: 'name', // 显示哪个 字段
					unit: '' // 单位
				},
				{
					name: '合计作业/工单数',
					sort: true,
					checked: true,
					width: 150,
					key: 'allOrderCount'
				},
				{
					name: '合计作业/累计人工时/(小时)',
					sort: true,
					// fixed: 1,
					checked: true,
					width: 240,
					key: 'totalWorkHour'
				},
				{
					name: '保养作业/工单数',
					sort: true,
					checked: true,
					width: 150,
					key: 'byOrderCount',
					unit: ''
				},
				{
					name: '保养作业/累计人工时/(小时)',
					sort: true,
					checked: true,
					width: 240,
					key: 'byWorkHour',
					unit: ''
				},
				{
					name: '维修作业/工单数',
					sort: true,
					checked: true,
					width: 150,
					key: 'wxOrderCount',
					unit: ''
				},
				{
					name: '维修作业/累计人工时/(小时)',
					sort: true,
					checked: true,
					width: 240,
					key: 'wxWorkHour',
					unit: ''
				},
				{
					name: '配件作业/工单数',
					sort: true,
					checked: true,
					width: 150,
					key: 'pjOrderCount',
					unit: ''
				},
				{
					name: '配件作业/累计人工时/(小时)',
					sort: true,
					checked: true,
					width: 240,
					key: 'pjWorkHour',
					unit: ''
				}
				],
				leaderHead: [{
					name: '组名', // 表头名称
					sort: false, // 是否开启该列的排序功能
					checked: true,
					width: 210, // 列宽
					key: 'name', // 显示哪个 字段
					unit: '' // 单位
				},
				{
					name: '合计作业/工单数',
					sort: true,
					checked: true,
					width: 164,
					key: 'allOrderCount'
				},
				{
					name: '合计作业/人数',
					sort: true,
					checked: true,
					width: 164,
					key: 'totalUserCount'
				},
				{
					name: '合计作业/累计人工时/(小时)',
					sort: true,
					// fixed: 1,
					checked: true,
					width: 175,
					key: 'totalWorkHour'
				},
				{
					name: '合计作业/人均工时/(小时)',
					sort: true,
					checked: true,
					width: 175,
					// fixed: 1,
					key: 'totalDivWorkHour'
				},
				{
					name: '保养作业/工单数',
					sort: true,
					checked: true,
					width: 164,
					key: 'byOrderCount',
					unit: ''
				},
				{
					name: '保养作业/人数',
					sort: true,
					checked: true,
					width: 164,
					key: 'byUserCount',
					unit: ''
				},
				{
					name: '保养作业/累计人工时/(小时)',
					sort: true,
					checked: true,
					width: 175,
					key: 'byWorkHour',
					unit: ''
				},
				{
					name: '保养作业/人均工时/(小时)',
					sort: true,
					checked: true,
					width: 175,
					key: 'byDivUserWorkTime',
					unit: ''
				},
				{
					name: '维修作业/工单数',
					sort: true,
					checked: true,
					width: 164,
					key: 'wxOrderCount',
					unit: ''
				},
				{
					name: '维修作业/人数',
					sort: true,
					checked: true,
					width: 164,
					key: 'wxUserCount',
					unit: ''
				},
				{
					name: '维修作业/累计人工时/(小时)',
					sort: true,
					checked: true,
					width: 175,
					key: 'wxWorkHour',
					unit: ''
				},
				{
					name: '维修作业/人均工时/(小时)',
					sort: true,
					checked: true,
					width: 175,
					key: 'wxDivUserWorkTime',
					unit: ''
				},
				{
					name: '配件作业/工单数',
					sort: true,
					checked: true,
					width: 164,
					key: 'pjOrderCount',
					unit: ''
				},
				{
					name: '配件作业/人数',
					sort: true,
					checked: true,
					width: 164,
					key: 'pjUserCount',
					unit: ''
				},
				{
					name: '配件作业/累计人工时/(小时)',
					sort: true,
					checked: true,
					width: 175,
					key: 'pjWorkHour',
					unit: ''
				},
				{
					name: '配件作业/人均工时/(小时)',
					sort: true,
					checked: true,
					width: 175,
					key: 'pjDivUserWorkTime',
					unit: ''
				}
				]
			},

			timeOpt: {
				hasData: true,
				tags: [{
					name: '合计作业时长',
					key: 'statusDisable',
					unit: '小时'
				},
				{
					name: '保养作业时长',
					key: 'statusProcessed',
					unit: '小时'
				},
				{
					name: '维修作业时长',
					key: 'statusFinish',
					unit: '小时'
				},
				{
					name: '配件作业时长',
					key: 'statusSign',
					unit: '小时'
				}
				],
				totals: {},
				typeIdx: 1, // 0按组 1按人
				groupRecords: [],
				allCounts: {},
				dateType: 0,
				chartData: {
					series: []
				},
				lineOpt: setLineOpt({
					tofix: 1
				}),
				lineOptDef: setLineOpt({
					tofix: 1
				}, 'line'),
				linedata: {
					series: []
				},
				type: 1, // 1按组统计，2按人统计
				lineType: 0, // 0整体趋势 1趋势对比
				tagIdx: 0,
				lineTypeGroup: [], // 选中的组
				lineTypeMbs: [], // 选中的人
				count: 0,
				userHead: [{
					name: '作业类型', // 表头名称
					sort: false, // 是否开启该列的排序功能
					checked: true,
					width: 210, // 列宽
					key: 'name', // 显示哪个字段
					unit: '' // 单位
				},
				{
					name: '累计作业时长',
					sort: true,
					checked: true,
					// fixed: 1,
					width: 200,
					key: 'workTime'
				},
				{
					name: '工单平均作业时长',
					sort: true,
					checked: true,
					width: 200,
					head: '/',
					key: 'divWorkTime'
				}
				],
				leaderHeadUser: [{
					name: '名称', // 表头名称
					sort: false, // 是否开启该列的排序功能
					checked: true,
					width: 210, // 列宽
					key: 'name', // 显示哪个字段
					unit: '' // 单位
				},
				{
					name: '作业天数',
					sort: true,
					checked: true,
					width: 200,
					key: 'workDayCount'
				},
				{
					name: '实际作业日平均作业时长',
					sort: true,
					checked: true,
					width: 220,
					key: 'divDayWorkTime'
				},
				{
					name: '作业累计时长',
					sort: true,
					checked: true,
					width: 175,
					key: 'totalWorkHour'
				},
				{
					name: '保养作业累计时长(小时)',
					sort: true,
					checked: true,
					width: 175,
					key: 'byWorkTimeTotal'
				},
				{
					name: '维修作业累计时长',
					sort: true,
					checked: true,
					width: 175,
					key: 'wxWorkTimeTotal'
				},
				{
					name: '配件作业累计时长',
					sort: true,
					checked: true,
					width: 175,
					key: 'pjWorkTimeTotal'
				}
				],
				leaderHead: [{
					name: '名称', // 表头名称
					sort: false, // 是否开启该列的排序功能
					checked: true,
					width: 210, // 列宽
					key: 'name', // 显示哪个字段
					unit: '' // 单位
				},
				{
					name: '作业人数',
					sort: true,
					checked: true,
					width: 200,
					key: 'workUserCount'
				},
				{
					name: '累计作业时长',
					sort: true,
					// fixed: 1,
					checked: true,
					width: 165,
					key: 'totalWorkHour'
				},
				{
					name: '实际作业日人均作业时长',
					sort: true,
					checked: true,
					width: 180,
					key: 'divUserDayWorkTime',
					unit: ''
				},
				{
					name: '作业人平均作业天数',
					sort: true,
					checked: true,
					width: 200,
					key: 'divUserWorkDayCount',
					unit: ''
				},
				{
					name: '保养作业累计时长(小时)',
					sort: true,
					checked: true,
					width: 175,
					key: 'byWorkTimeTotal',
					unit: ''
				},
				{
					name: '维修作业累计时长(小时)',
					sort: true,
					checked: true,
					width: 175,
					key: 'wxWorkTimeTotal',
					unit: ''
				},
				{
					name: '配件作业累计时长',
					sort: true,
					checked: true,
					width: 175,
					key: 'pjWorkTimeTotal',
					unit: ''
				}
				]
			},

			implementOpt: {
				lineOpt: setLineOpt({
					tofix: 0
				}),
				lineOptDef: setLineOpt({
					tofix: 0
				}, 'line'),
				hasData: true,
				typeIdx: 1, // 0按组 1按人
				dateType: 0,
				type: 1, // 1按组统计，2按人统计
				lineType: 0, // 0整体趋势 1趋势对比
				tagIdx: 0,
				lineTypeGroup: [], // 选中的组
				lineTypeMbs: [], // 选中的人
				totals: {},
				tags: [{
					name: '合计作业工单',
					key: 'statusDisable',
					unit: '单'
				},
				{
					name: '保养作业工单',
					key: 'statusProcessed',
					unit: '单'
				},
				{
					name: '维修作业工单',
					key: 'statusFinish',
					unit: '单'
				},
				{
					name: '配件作业工单',
					key: 'statusSign',
					unit: '单'
				}
				],
				count: 0,
				userHead: [{
					name: '作业类型', // 表头名称
					sort: false, // 是否开启该列的排序功能
					width: 210, // 列宽
					checked: true,
					key: 'name', // 显示哪个字段
					unit: '' // 单位
				},
				{
					name: '作业工单数量',
					sort: false,
					checked: true,
					width: 220,
					key: 'data'
				},
				{
					name: '占比',
					sort: false,
					width: 235,
					checked: true,
					key: 'ratio',
					unit: '%'
				}
				],
				leaderHeadUser: [{
					name: '名称', // 表头名称
					sort: false, // 是否开启该列的排序功能
					checked: true,
					width: 210, // 列宽
					key: 'name', // 显示哪个字段
					unit: '' // 单位
				},
				{
					name: '合计作业工单数',
					sort: true,
					checked: true,
					width: 164,
					key: 'allCount'
				},
				{
					name: '保养作业工单数',
					sort: true,
					checked: true,
					width: 164,
					key: 'byOrderCount'
				},
				{
					name: '保养作业工单占比',
					sort: true,
					checked: true,
					width: 164,
					key: 'byPercentage',
					fixed: 1,
					unit: '%'
				},
				{
					name: '维修作业工单数',
					sort: true,
					checked: true,
					width: 164,
					key: 'wxOrderCount'
				},
				{
					name: '维修作业工单占比',
					sort: true,
					checked: true,
					width: 164,
					key: 'wxPercentage',
					fixed: 1,
					unit: '%'
				},
				{
					name: '配件作业工单数',
					sort: true,
					checked: true,
					width: 164,
					key: 'pjOrderCount'
				},
				{
					name: '配件作业工单占比',
					sort: true,
					checked: true,
					width: 164,
					fixed: 1,
					key: 'pjPercentage',
					unit: '%'
				}
				],
				leaderHead: [{
					name: '名称', // 表头名称
					sort: false, // 是否开启该列的排序功能
					checked: true,
					width: 210, // 列宽
					key: 'name', // 显示哪个字段
					unit: '' // 单位
				},
				{
					name: '合计作业工单数',
					sort: true,
					checked: true,
					width: 164,
					key: 'allCount'
				},
				{
					name: '保养作业工单数',
					sort: true,
					checked: true,
					width: 164,
					key: 'byOrderCount'
				},
				{
					name: '保养作业工单占比',
					sort: true,
					checked: true,
					width: 164,
					fixed: 1,
					key: 'byPercentage',
					unit: '%'
				},
				{
					name: '维修作业工单数',
					sort: true,
					checked: true,
					width: 164,
					key: 'wxOrderCount'
				},
				{
					name: '维修作业工单占比',
					sort: true,
					checked: true,
					width: 164,
					fixed: 1,
					key: 'wxPercentage',
					unit: '%'
				},
				{
					name: '配件作业工单数',
					sort: true,
					checked: true,
					width: 164,
					key: 'pjOrderCount'
				},
				{
					name: '配件作业工单占比',
					sort: true,
					checked: true,
					fixed: 1,
					width: 164,
					key: 'pjPercentage',
					unit: '%'
				}
				],
				linedata: {
					categories: [],
					series: []
				},
				// 保养执行配置
				chartData: {
					series: []
				},

				groupRecords: [], // 组明细
				userRecords: [] // 人明细
			}
		};
	},
	computed: {
		...mapState('user', ['userinfo'])
	},
	async mounted() {
		uni.$on('setDatas', this.setDataFuc);
		// await this.getRoutes()
		this.setDataFuc();
	},
	beforeDestroy() {
		uni.$off('setDatas');
	},
	methods: {
		...mapActions('user', ['getRoutes']),
		wrapClick() {
			this.$refs.tooltip.close();
		},
		// 查看任务
		lookTasks(everydays) {
			this.showTasks = true;
			this.endTime = everydays.order.date;
			// this.$refs['view-tasks'].getList(everydays.order.date)
		},
		// 获取工单页带参下传 数据
		getWorkOrderDeep(res) {
			this.workOrderDeep = res;
		},
		// 获取工时页带参下传 数据
		getWorkTimeDeep(res) {
			this.workTimeDeep = res;
		},
		// 关闭查看任务弹窗
		handleClose() {
			this.showTasks = false;
		},
		// 切换表格显示 {合计，保养，维修，配件}
		choose(index) {
			this.chooseIndex = index;
			if (this.everydays.typeIdx == 1) {
				this.choosedHeadUserList = this.handle(this.typeListOther[index]);
			} else {
				this.choosedHeadList = this.handle(this.typeListOther[index]);
			}
		},
		// 切换表格显示 处理函数 指标设置
		handle(str) {
			let leaderHead = this.everydays.leaderHead.concat([]);
			let leaderHeadUser = this.everydays.leaderHeadUser.concat([]);
			if (this.everydays.typeIdx == 1) {
				return leaderHeadUser.filter((item, index) => index == 0 || item.name.indexOf(
					str) != -1);
			} else {
				return leaderHead.filter((item, index) => index == 0 || item.name.indexOf(str) != -1);
			}
		},
		// 应用到全部
		getApplyToAll(data) {
			if (data.applyToAll && data.name == 'achievements_workOrder') {
				this.$refs['workTime'].initData(data);
			} else if (data.applyToAll && data.name == 'achievements_workTime') {
				this.$refs['workOrder'].initData(data);
			}
		},
		// 个人版表格点击
		toMemberDetail(event, k) {
			// console.log(event)
			const map = {
				保养作业工单: 0,
				维修作业工单: 1,
				配件作业工单: 2
			};
			let idx = map[event.item.name];
			this.toMaintenanceList(k, idx);
		},
		// 表格点击事件
		toContractDetail(res, typdIdx) {
			const {
				item,
				key
			} = res;
			console.log(item, key, typdIdx);
			if (key == 'name' && this.memberList.length) {
				if (!this.memberList.length) {
					return;
				}
				// 数据下转
				let list = [];
				let groupId = '';
				if (this.memberList.length == 1) {
					list = this.memberList[0].children;
					groupId = this.memberList[0].id;
				} else {
					list = this.memberList;
				}
				if (typdIdx == 1 && this.memberList.length > 1) {
					// 按人对比 查询子集维保员
					for (let i = 0; i < list.length; i++) {
						for (let j = 0; j < list[i].children.length; j++) {
							if (list[i].children[j].name == item.name) {
								const storage = {
									groupId: this.groupId,
									id: list[i].children[j].id,
									title: item.name
								};
								this.toDeepPage(storage);
								return;
							}
						}
					}
				} else {
					console.log(item, key, list);
					for (let i = 0; i < list.length; i++) {
						if (list[i].name == item.name) {
							if (list[i].type == 2) {
								// 人单位
								const storage = {
									groupId: groupId,
									id: list[i].id,
									title: item.name
								};
								this.toDeepPage(storage);
							} else {
								// 组单位
								groupId = list[i].id;
								let ids = [];
								list[i].children.forEach(item => {
									ids.push(item.id);
								});
								const storage = {
									groupId: groupId,
									id: ids.join(','),
									groupList: [list[i]],
									title: item.name
								};
								this.toDeepPage(storage);
							}
							return;
						}
					}
				}
			}
		},
		// 数据下转
		toDeepPage(data) {
			data.checkedDate = this.checkedDate;
			data.workOrderDeep = this.workOrderDeep,
			data.workTimeDeep = this.workTimeDeep,
			data.chooseIndex = this.chooseIndex;
			uni.setStorage({
				key: 'statistical' + (Number(this.childDeep || 0) + 1),
				data: data,
				success: (res) => {
					uni.navigateTo({
						url: `./statistical?tabIdx=6&childDeep=${Number(this.childDeep || 0) + 1}`
					});
				},
				fail: (err) => {
					console.log(err);
				}
			});
		},
		toMaintenanceList(k, tabIdx) {
			const data = {
				userList: this.userList,
				filter: JSON.parse(JSON.stringify(this.filter))
			};
			if (k == 1) {
				const checkedDate = this.checkedDate;
				let time =
						checkedDate.year +
						'-' +
						(checkedDate.month > 9 ? checkedDate.month : '0' + checkedDate.month) +
						'-' +
						(checkedDate.day > 9 ? checkedDate.day : '0' + checkedDate.day);
				data.filter.startTime = time;
				data.filter.endTime = time;
				data.filter.dateType = 4;
			} else {}
			uni.setStorage({
				data: data,
				key: 'recordFilter',
				success: () => {
					if (tabIdx) {
						uni.navigateTo({
							url: '/subpages/statistics/orderList?tabIdx=' + tabIdx
						});
					} else {
						uni.navigateTo({
							url: '/subpages/statistics/orderList'
						});
					}
				}
			});
		},

		initData(k) {
			console.log('initData12', this.userList);
			if (this.year) {
				if (k) {
					this.getCalendarPlans({
						year: this.year,
						month: this.month
					});
				}
			} else {
				let date = new Date();
				const year = date.getFullYear();
				const month = date.getMonth() + 1;
				const day = date.getDate();
				this.year = year;
				this.month = month;
				this.checkedDate = {
					year,
					month,
					day
				};
				this.getCalendarPlans({
					year: this.year,
					month: this.month
				});
			}
			this.loadMatRocord();
		},
		// 日历选择某一天
		selectDate(res) {
			console.log('日历选择某一天', res);
			this.checkedDate = res;
			this.loadMatRocord();
		},
		setDateInfoFuc(res) {
			console.log('日历更新某一天详情信息', res);
			this.everydays.order = res.order || {
				date: '',
				holiday: false,
				isPlan: false,
				orderCount: 0,
				userCount: 0
			};
			this.everydays.hasData = res.order.orderCount > 0 ? true : false;
		},
		// 切换某个卡片的按组或人类型
		changeTab(key, idx) {
			this[key].typeIdx = idx;
			this.choose(this.chooseIndex);
			if (key == 'everydays') {
				this.loadMatRocord();
			}
		},

		// 提取表格全部数据
		setGeoupData(arr, key) {
			let list = [];
			for (let i = 0; i < arr.length; i++) {
				if (arr[i].name == '全部') {
					this[key].totals = arr[i];
				} else {
					list.push(arr[i]);
				}
			}
			this[key].groupRecords = list;
		},

		// 累加全部项(每日作业明细-个人)
		setAllRecord(list, name) {
			if (!list || list.length == 0) {
				return {};
			}
			let keys = Object.keys(list[0]);
			let allItem = {
				name: name || '全部',
				orderCount: 0,
				workTime: '',
				workTimeMin: 0
			};
			for (let i = 0; i < list.length; i++) {
				if (!list[i].divWorkTime) {
					list[i].divWorkTime = '0.00';
					list[i].orderCount = 0;
				}
				if (!list[i].workTime) {
					list[i].workTime = '0.00';
					list[i].orderCount = 0;
				}
				allItem.orderCount = allItem.orderCount + Number(list[i].orderCount || 0);
				allItem.workTimeMin = allItem.workTimeMin + Number(list[i].workTimeMin || 0);
			}

			console.log('allItem', list, allItem);
			let str = Math.floor(allItem.workTimeMin / 60) + '时' + allItem.workTimeMin % 60 + '分';
			allItem.workTime = str;
			return allItem;
		},

		// 打开指标设置
		showKeysSelect(key) {
			let tags = this.handle(this.typeListOther[this.chooseIndex]);
			this.$refs.tagSelect.init({
				tags: tags,
				key: key
			});
		},

		// 自定义表格字段
		changeTags(res) {
			res.tags.forEach(item => {
				if (this.everydays.typeIdx == 1) {
					this.everydays.leaderHeadUser.map(it => {
						if (it.name == item.name) {
							it.checked = item.checked;
						}
						if (!it.checked) {
							return;
						}
						return it;
					});
				} else {
					this.everydays.leaderHead.map(it => {
						if (it.name == item.name) {
							it.checked = item.checked;
						}
						if (!it.checked) {
							return;
						}
						return it;
					});
				}
			});
			// this[res.key][this[res.key].typeIdx == 1 ? 'leaderHeadUser' : 'leaderHead'] = res.tags;
			// this.$forceUpdate()
		},
		// 查询日历表当月工单情况
		getCalendarPlans(dates) {
			uni.showLoading({
				title: '加载中',
				mask: true
			});
			this.workerOrders = [];
			getCalendarPlans({
				isShowHoliday: this.memberList.length == 0,
				userIds: this.userList,
				yearMonth: dates.year + '-' + (dates.month > 9 ? dates.month : '0' + '' + dates.month)
			}).then(res => {
				this.workerOrders = res.data;
				uni.hideLoading();
			});
		},
		// 切换月份
		changeMonth(res) {
			console.log('切换月份', res);
			this.year = res.year;
			this.month = res.month;
			this.getCalendarPlans(res);
		},
		// 切换人员
		changeMember() {
			// hanleToken('set', 'statisticalTabIndex', 1);
			uni.navigateTo({
				url: '/pages/memberSelect/memberSelect'
			});
		},

		// 自定义日期
		closeSelectTimePopup(res) {
			if (res) {
				console.log('自定义日期', res);
				let start = '';
				let end = '';

				if (res.indexOf('-') != -1) {
					const timeArr = res.split('-');
					start = timeArr[0].replaceAll('.', '-');
					end = timeArr[1].replaceAll('.', '-');
				} else {
					const time = res.replaceAll('.', '-');
					start = time;
					end = time;
				}
				const nowDay = getNowTime();
				let nowtime = new Date(nowDay).getTime();
				let starttime = new Date(start).getTime();
				let endtime = new Date(end).getTime();
				if (endtime >= nowtime) {
					console.log('包含今天');
					uni.showToast({
						title: '自定义日期范围须小于今天',
						icon: 'none'
					});
					return;
				}

				this.filter.startTime = start;
				this.filter.endTime = end;
				this.filter.dateType = 4;
			} else {}
			this.selectTimePopup = false;
			this.initData();
		},

		// 加载保养执行明细
		loadMatRocord() {
			if (this.memberList.length) {
				// 组长
				if (this.everydays.typeIdx == 0) {
					// 组模式
					let arr = [{
						deptId: -1,
						deptName: '全部',
						userIds: this.userList
					}];
					for (var i = 0; i < this.memberList.length; i++) {
						const item = {
							deptId: this.memberList[i].id,
							deptName: this.memberList[i].name === '其他' ? '未分组' : this.memberList[i].name,
							userIds: []
						};
						for (var j = 0; j < this.memberList[i].children.length; j++) {
							item.userIds.push(this.memberList[i].children[j].id);
						}
						arr.push(item);
						// console.log(arr,6666)
					}

					getDayDetail3({
						date: this.checkedDate.year + '-' + this.checkedDate.month + '-' + this.checkedDate
							.day,
						deptGroups: arr
					}).then(res => {
						const list = res.data;
						// console.log(list,"list的值");
						if (list.length) {
							for (var i = 0; i < list.length; i++) {
								list[i].name = list[i].deptName;
								list[i].allOrderCount = Number(list[i].byOrderCount || 0) + Number(list[i]
									.wxOrderCount || 0) + Number(list[i].pjOrderCount || 0);
								list[i].allUserCount = Number(list[i].byUserCount || 0) + Number(list[i]
									.wxUserCount || 0) + Number(list[i].pjUserCount || 0);
								list[i].allWokerHour = Number(list[i].pjWorkHour || 0) + Number(list[i]
									.wxWorkHour || 0) + Number(list[i].byWorkHour || 0);
								list[i].allUserHour = Number(list[i].pjDivUserWorkTime || 0) + Number(list[i]
									.wxDivUserWorkTime || 0) + Number(list[i].byDivUserWorkTime || 0);
							}
							this.setGeoupData(list, 'everydays');
						} else {
							this.everydays.totals = {};
							this.everydays.groupRecords = [];
						}
					});
				} else {
					getDayDetail4({
						date: this.checkedDate.year + '-' + this.checkedDate.month + '-' + this.checkedDate
							.day,
						userIds: this.userList
					}).then(res => {
						const list = res.data;
						if (list.length) {
							for (var i = 0; i < list.length; i++) {
								list[i].name = list[i].userName;
								list[i].allOrderCount = Number(list[i].byOrderCount || 0) + Number(list[i]
									.wxOrderCount || 0) + Number(list[i].pjOrderCount || 0);
								list[i].allWokerHour = Number(list[i].pjWorkHour || 0) + Number(list[i]
									.wxWorkHour || 0) + Number(list[i].byWorkHour || 0);
							}
							this.setGeoupData(list, 'everydays');
						} else {
							this.everydays.totals = {};
							this.everydays.groupRecords = [];
						}
					});
				}
			} else {
				// 某个维保员
				getDayDetail2({
					date: this.checkedDate.year + '-' + this.checkedDate.month + '-' + this.checkedDate.day,
					userIds: this.userList
				}).then(res => {
					const list = res.data;
					let records = [

						{
							name: '保养作业工单'
						},
						{
							name: '维修作业工单'
						},
						{
							name: '配件作业工单'
						}
					];
					if (list.length) {
						for (var i = 0; i < list.length; i++) {
							list[i].allOrderCount = Number(list[i].byOrderCount || 0) + Number(list[i]
								.wxOrderCount || 0) + Number(list[i].pjOrderCount || 0);
							list[i].allWokerHour = Number(list[i].pjWorkHour || 0) + Number(list[i]
								.wxWorkHour || 0) + Number(list[i].byWorkHour || 0);

							if (list[i].type == 4) {
								records[2] = {
									...records[2],
									...list[i]
								};
							}
							if (list[i].type == 2) {
								records[1] = {
									...records[1],
									...list[i]
								};
							}
							if (list[i].type == 1) {
								records[0] = {
									...records[0],
									...list[i]
								};
							}
						}
						this.everydays.totals = this.setAllRecord(records, '合计');
						// console.log('this.everydays.totals',records,this.everydays.totals)
					} else {
						this.everydays.totals = {
							name: '合计'
						};
					}
					this.everydays.groupRecords = records;
				});
			}
		},

		// 累加全部项(每日作业明细-个人)
		setAllRecord(list, name) {
			if (!list || list.length == 0) {
				return {};
			}
			let keys = Object.keys(list[0]);
			let allItem = {
				name: name || '全部',
				orderCount: 0,
				workTime: '',
				workTimeMin: 0
			};
			for (let i = 0; i < list.length; i++) {
				if (!list[i].divWorkTime) {
					list[i].divWorkTime = '0.00';
					list[i].orderCount = 0;
				}
				if (!list[i].workTime) {
					list[i].workTime = '0.00';
					list[i].orderCount = 0;
				}
				allItem.orderCount = allItem.orderCount + Number(list[i].orderCount || 0);
				allItem.workTimeMin = allItem.workTimeMin + Number(list[i].workTimeMin || 0);
			}

			console.log('allItem', list, allItem);
			// let str = Math.floor(allItem.workTimeMin / 60) + '时' + allItem.workTimeMin % 60 + '分'
			let str = (allItem.workTimeMin / 60).toFixed(2);
			allItem.workTime = str;
			return allItem;
		},

		showSPicker(key) {
			this.$refs.sPicker.init({
				options: this.dateTypes,
				value: this[key].dateType,
				keyval: key
			});
		},
		// 对比名单
		changeMbs(key) {
			// lineTypeGroup:[],//选中的组
			// lineTypeMbs:[],//选中的人
			let groups = []; // 组id
			let mbs = []; // 人id
			if (this[key].lineTypeGroup.length == 0) {
				// 是否有选中的组
				for (let i = 0; i < this.memberList.length; i++) {
					groups.push(this.memberList[i].id);
				}
			} else {
				groups = JSON.parse(JSON.stringify(this[key].lineTypeGroup));
			}
			if (this[key].lineTypeMbs.length == 0) {
				// 是否有选中的人
				mbs = JSON.parse(JSON.stringify(this.userList));
			} else {
				mbs = JSON.parse(JSON.stringify(this[key].lineTypeMbs));
			}
			if (groups.length > 5) {
				groups = groups.slice(0, 5);
			}

			if (mbs.length > 5) {
				mbs = mbs.slice(0, 5);
			}
			this.$refs.memberSelect.init({
				type: this[key].type,
				groups,
				mbs,
				key
			});
		},

		// 修改数据源
		setDataFuc() {
			this.groupModel = this.findRoute('data_change');
			if (!this.filter.startTime) {
				const dates = getLastDates(7);
				this.filter.startTime = dates.startTime;
				this.filter.endTime = dates.endTime;
			}
			uni.getStorage({
				key: 'statistical' + (this.childDeep ? this.childDeep : ''),
				success: res => {
					if (res.data.checkedDate) {
						this.year = res.data.checkedDate.year;
						this.month = res.data.checkedDate.month;
						this.checkedDate = res.data.checkedDate;
					}
					if (res.data.chooseIndex) {
						this.chooseIndex = res.data.chooseIndex;
					}
					this.userList = res.data.id.split(',');
					this.groupId = res.data.groupId;
					this.memberList = res.data.groupList || [];
					this.title = res.data.title;
					if (this.memberList.length <= 1) {
						// 判断是否有子集组 没有则初始化全部到按人统计
						this.timeOpt.typeIdx = 1;
						this.everydays.typeIdx = 1;
						this.implementOpt.typeIdx = 1;

						this.timeOpt.lineType = 0;
						this.everydays.lineType = 0;
						this.implementOpt.lineType = 0;
					}

					if (this.memberList.length == 0) {
						// 判断是否是按个人统计  是则折线图全部切换为整体统计
						this.timeOpt.lineType = 0;
						this.everydays.lineType = 0;
						this.implementOpt.lineType = 0;
					}
					this.choose(this.chooseIndex);
					this.initData(1);
					console.log('修改数据源', res, this.childDeep, );
				}
			});
		},

		// 格式化时间显示
		reSetTimeText(time) {
			// console.log('time',time)
			if (!time) {
				return time;
			}
			let t = time.replaceAll('小', '');
			t = t.split('时');
			if (t.length > 1) {
				return t[0] > 0 ? time : t[1];
			} else {
				return time;
			}
		}
	}
};
</script>

<style lang="scss" scoped>
	.capsule {
		box-sizing: border-box;
		width: 56px;
		height: 28px;
		border: 1px solid #d5d5d5;
		font-size: 24rpx;
		display: flex;
		align-items: center;
		justify-content: space-around;
		color: #666666;
		font-weight: 400;
		padding: 0 8rpx;
	}

	.timeChoose {
		display: flex;
		box-sizing: border-box;
		align-items: center;
		justify-content: center;
		width: 57px;
		height: 28px;
		border: 1px solid #d5d5d5;
		border-radius: 2px;
		padding: 0 6rpx;
		color: #666666;
		font-size: 24rpx;
	}

	.capsuleCheck {
		border-color: #0091ff;
		background: #dcf0ff;
		color: #0091ff;
	}

	.date-type {
		color: #666666;
		background: #f3f6f8;
		border-radius: 4rpx;
		font-size: 24rpx;
		padding: 3rpx 16rpx;
		font-weight: normal;
		display: flex;
		align-items: center;
		justify-content: center;
		letter-spacing: 1rpx;

		image {
			width: 20rpx;
			height: 20rpx;
			margin-left: 3rpx;
		}
	}

	.bottom-block {
		text-align: center;
		font-size: 26rpx;
		color: #999;
		margin: 40rpx;
	}

	.achievements {
		width: 100%;
        overflow-x: hidden;
		.card {
			background-color: #fff;
			width: calc(100% - 80rpx);
			padding: 20rpx;
			margin: 0 auto;
			margin-top: 20rpx;
			border-radius: 8rpx;

			.title {
				font-size: 32rpx;
				border-left: 4rpx solid #ffffff;
				line-height: 32rpx;
				padding-left: 16rpx;
				color: #333333;
				font-weight: bold;
				margin-left: -19rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 20rpx;
			}

			.title-d {
				font-size: 28prx;
				border-left: 4rpx solid #ffffff;
				line-height: 28rpx;
				padding-left: 16rpx;
				color: #333333;
				font-weight: bold;
				margin-left: -19rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-bottom: 18rpx;
			}

			.tag1 {
				width: 80rpx;
				height: 28rpx;
				font-weight: normal;
				text-align: center;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 20rpx;
				border-radius: 4rpx;
			}

			.err {
				padding-left: 4rpx;
				color: #e02020;
				background: #ffe6e6;
			}

			.info {
				background: #e9e9e9;
				color: #999999;
			}

			.msg {
				width: 30rpx;
				height: 30rpx;
				margin-left: 8rpx;
				padding-top: 5rpx;
			}

			.key-setting {
				color: #666666;
				font-size: 25rpx;
				font-weight: normal;
			}

			.data-change {
				color: #0091ff;
				font-size: 24rpx;
				padding: 3rpx 0rpx;
				font-weight: normal;
				display: flex;
				line-height: 22rpx;
				align-items: center;
				justify-content: center;
				letter-spacing: 1rpx;

				image {
					width: 40rpx;
					height: 40rpx;
					padding-top: 4rpx;
					margin-right: 3rpx;
				}
			}

			.mbs-type {
				color: #666666;
				background: #f3f6f8;
				border-radius: 4rpx;
				font-size: 24rpx;
				padding: 3rpx 16rpx;
				font-weight: normal;
				display: flex;
				align-items: center;
				justify-content: center;
				letter-spacing: 1rpx;
				margin-right: 10rpx;

				image {
					width: 30rpx;
					height: 30rpx;
					margin-right: 3rpx;
				}
			}

			.light {
				border-left: 4rpx solid #0091ff;
			}

			.num-block {
				width: 100%;
				display: flex;
				align-items: center;
				padding: 20rpx 0;

				.line {
					width: 2rpx;
					height: 60rpx;
					background-color: #eee;
				}

				&-item {
					flex: 1;
					text-align: center;

					.num {
						font-size: 36rpx;
						font-weight: bold;
						color: #333;
					}

					.name {
						font-size: 26rpx;
						padding-top: 5rpx;
						color: #999999;
						display: flex;
						justify-content: center;
						align-items: flex-start;
					}
				}
			}

			.chart-total {
				width: 100%;
				display: flex;
				color: #666666;
				font-size: 28rpx;
				align-items: center;
				margin-bottom: 40rpx;

				&-count {
					flex: 1;
					text-align: center;

					text {
						color: #333;
						font-weight: bold;
					}
				}

				&-detail {
					width: 282rpx;
					text-align: right;
					font-weight: normal;
					display: flex;
					justify-content: flex-end;
					align-items: center;
					color: #0091ff;
					font-size: 26rpx;

					view {
						display: flex;
						align-items: center;
						padding: 10rpx 20rpx;
						padding-right: 0rpx;
					}

					image {
						width: 25rpx;
						height: 25rpx;
						margin-left: 10rpx;
					}
				}
			}
		}

		.filter {
			width: 100%;

			&-item {
				display: flex;
				align-items: center;
				font-size: 26rpx;
				padding-top: 20rpx;

				&-label {
					width: 20%;
					color: #666666;
				}

				&-content {
					width: 80%;
					display: flex;

					.tag {
						width: 166rpx;
						text-align: center;
						// flex: 1;
						background: #f3f6f8;
						border-radius: 8rpx;
						height: 48rpx;
						line-height: 47rpx;
						font-size: 24rpx;
						color: #333;
						border: 2rpx solid #f3f6f8;
						font-weight: normal;
						transition: 0.3s all;
					}

					.tag:nth-child(2) {
						margin: 0 16rpx;
					}

					.date {
						flex: 1;
						color: #999999;
					}

					.act {
						border: 2rpx solid #0091ff;
						background-color: #eef8ff;
						color: #0091ff;
					}
				}
			}
		}

		.line-chart-unit {
			width: 98%;
			color: #999;
			font-size: 22rpx;
			display: flex;
			justify-content: space-between;
			padding: 0 1%;
		}

		.line-chart {
			width: 100%;
			height: 200px;
			display: flex;
			justify-content: center;
			align-items: center;

			.line {
				width: 100%;
				height: 200px;
			}
		}

		.chart-block {
			width: 100%;
			height: 180px;

			.ring {
				width: 100%;
				height: 180px;
			}
		}

		.data-types {
			width: 100%;
			// padding-top: 18rpx;
			padding-bottom: 20rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			&-right {
				display: flex;
				justify-content: flex-end;
				align-items: center;
				margin-left: auto;
			}
		}

		.date-view {
			color: #999999;
			font-size: 26rpx;
			// margin-bottom: 10rpx;
		}

		.tag-block {
			width: 100%;
			// margin-bottom: 12rpx;
			height: 60rpx;
			overflow-x: scroll;
			white-space: nowrap;

			&-item {
				color: #666666;
				background: #f3f6f8;
				font-size: 24rpx;
				margin-right: 20rpx;
				border-radius: 2rem;
				padding: 3rpx 20rpx;
				display: inline-block;
			}

			.act {
				color: #0091ff;
				background: #dcf0ff;
			}
		}
	}
</style>
